<template>
  <div>
    <el-row :gutter="20" style="background-color: white">
      <el-col :offset="0"> <a href="#">首页</a> / 智慧停车 / 停车管理 </el-col>
    </el-row>
    <hr />

    <el-row :gutter="20">
      <el-col :span="5" :offset="2">
        <el-input
          placeholder="请输入车牌号"
          v-model="selCarNumber"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="5" :offset="2">
        <el-input
          placeholder="请输入车位编号"
          v-model="selParkingSpaceNumber"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-select placeholder="请选择车位状态" v-model="selCarType">
          <el-option label="已缴费" value="已缴费">已缴费</el-option>
          <el-option label="待缴费" value="待缴费">待缴费</el-option>
          <el-option label="已欠费" value="已欠费">已欠费</el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button type="primary" icon="el-icon-search" @click="findbyParam()"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <hr />

    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="dialogFormVisible1 = true"
          >添加</el-button
        >
        <el-button type="success" @click="find()">显示全部</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="pagination.records"
      style="width: 100%"
      :default-sort="{ prop: 'car_id', order: 'carId' }"
    >
      <el-table-column prop="carNumber" label="车牌号"> </el-table-column>
      <el-table-column prop="bname" label="楼栋号"> </el-table-column>
      <el-table-column prop="hname" label="房屋号"> </el-table-column>
      <el-table-column prop="carType" label="车类型"> </el-table-column>
      <el-table-column prop="carBrand" label="车品牌"> </el-table-column>
      <el-table-column prop="carColor" label="颜色"> </el-table-column>
      <el-table-column prop="username" label="业主"> </el-table-column>
      <el-table-column prop="tel" label="电话"> </el-table-column>
      <el-table-column prop="buildingId" label="停车场编号"> </el-table-column>
      <el-table-column prop="parkingspaceNumber" label="停车位编号">
      </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column label="操作" width="180px"
        ><template slot-scope="scope">
          <el-button
            type="warning"
            @click="updateUI(scope.row)"
            plain
            size="mini"
            >修改</el-button
          >
          <el-button
            type="danger"
            @click="deleteParkinglot(scope.row)"
            plain
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>

    <!-- 添加停车位页面的停车位弹出框11111111111111111 -->
    <el-dialog title="添加业主车辆" :visible.sync="dialogFormVisible1" width="1000px">
      <el-steps :active="active" finish-status="success" space align-center>
        <el-step title="选择车位"></el-step>
        <el-step title="选择业主"></el-step>
        <el-step title="添加车辆信息"></el-step>
      </el-steps>
      <el-row :gutter="24">
        <el-button type="primary" style="margin-left: 800px"
          @click="findParkingspace()">选择车位</el-button>
      </el-row>
      <hr />
      <el-row :gutter="24">
        <el-col :span="6">停车位ID：{{parkingspace2.parkingspaceId}}</el-col>
        <el-col :span="6" :offset="2">车位编号：{{parkingspace2.parkingspaceNumber}}</el-col>
        <el-col :span="6" :offset="2">停车场编号：{{parkingspace2.buildingId}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">车位状态：{{parkingspace2.parkingspaceState}}</el-col>
        <el-col :span="6" :offset="2">面积：{{parkingspace2.area}}</el-col>
        <el-col :span="6" :offset="2">备注：{{parkingspace2.remarks}}</el-col>
      </el-row>
      <hr/>
      <el-row :gutter="24">
        <el-col :span="3" :offset="18"><el-button style="margin-top: 12px;" type="danger" @click="quxiao()">取消</el-button></el-col>
        <el-col :span="3"><el-button style="margin-top: 12px;" @click="next" :disabled="disabled">下一步</el-button></el-col>
      </el-row>
    <el-dialog width="800px" title="选择车位" :visible.sync="innerVisible" append-to-body >
      <el-row :gutter="20">
        <el-col :span="5" :offset="5">
          <el-input placeholder="请输入停车场" v-model="selCarparkinglot" clearable></el-input>
        </el-col>
        <el-col :span="5" >
          <el-input placeholder="请输入车位编号" v-model="selParkingSpaceNumber2" clearable></el-input>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="findcarparkingspacebyParam()">条件搜索</el-button>
        <el-button type="primary" icon="el-icon-search" @click="findParkingspace()">查询所有</el-button>
      </el-row>
    <hr />
          <el-table :data="parkingspace.records" style="width: 100%" :default-sort="{ prop: 'parkingspace_id', order: 'parkingspaceId' }">
            <el-table-column prop="buildingId" label="停车场编号"> </el-table-column>
            <el-table-column prop="parkingspaceId" label="车位id"> </el-table-column>
            <el-table-column prop="parkingspaceNumber" label="车位编号"> </el-table-column>
            <el-table-column prop="parkingspaceType" label="车位类型"> </el-table-column>
            <el-table-column prop="parkingspaceState" label="车位状态"> </el-table-column>
            <el-table-column prop="area" label="面积"> </el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="scope"><el-button type="warninga" plain size="mini" @click="parkingspace2bc(scope.row)">选择</el-button></template>
          </el-table-column>
          
        </el-table>
                  <el-pagination
            @size-change="handleSizeChangeparking"
            @current-change="handleCurrentChangeparking"
            :current-page="parkingspace.current"
            :page-sizes="[5]"
            :page-size="parkingspace.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parkingspace.total"
          >
    </el-pagination>
        </el-dialog>
    </el-dialog>

    <!-- 添加停车位页面的业主信息的弹出框2222222222222222 -->
    <el-dialog title="添加业主信息" :visible.sync="dialogFormVisible2" width="1000px">
      <el-steps :active="active" finish-status="success" space align-center>
        <el-step title="选择车位"></el-step>
        <el-step title="选择业主"></el-step>
        <el-step title="添加车辆信息"></el-step>
      </el-steps>
      <el-row :gutter="24">
        <el-button type="primary" style="margin-left: 800px" @click="findCarUser()">选择业主</el-button>
      </el-row>
      <hr />
      <el-row :gutter="24">
        <el-col :span="6">业主ID：{{carUser2.userId}}</el-col>
        <el-col :span="6" :offset="2">名称：{{carUser2.username}}</el-col>
        <el-col :span="6" :offset="2">性别：{{carUser2.sex}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">身份证：{{carUser2.identitycard}}</el-col>
        <el-col :span="6" :offset="2">联系方式：{{carUser2.tel}}</el-col>
        <el-col :span="6" :offset="2">创建员工：{{carUser2.name}}</el-col>
      </el-row>
      <hr/>
      <el-row :gutter="24">
        <el-col :span="2" :offset="15"><el-button style="margin-top: 12px;" type="danger" @click="quxiao()">取消</el-button></el-col>
        <el-col :span="2" :offset="1"><el-button style="margin-top: 12px;" @click="back()" >上一步</el-button></el-col>
        <el-col :span="2" :offset="1"><el-button style="margin-top: 12px;" @click="next2()" :disabled="disable2">下一步</el-button></el-col>
      </el-row>
        <el-dialog width="800px" title="选择业主" :visible.sync="innerVisible2" append-to-body >
          <el-row :gutter="20">
        <el-col :span="5" :offset="5">
          <el-input placeholder="请输入电话号码" v-model="tel" clearable></el-input>
        </el-col>
        <el-col :span="5" >
          <el-input placeholder="请输入业主名称" v-model="selusername" clearable></el-input>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="findcarUserbyParam()">条件搜索</el-button>
        <el-button type="primary" icon="el-icon-search" @click="findCarUser()">查询所有</el-button>
      </el-row>
    <hr />
          <el-table :data="carUser.records" style="width: 100%" :default-sort="{ prop: 'user_id', order: 'userId' }">
            <el-table-column prop="userId" label="业主ID"> </el-table-column>
            <el-table-column prop="username" label="业主姓名"> </el-table-column>
            <el-table-column prop="sex" label="性别"> </el-table-column>
            <el-table-column prop="tel" label="联系方式"> </el-table-column>
            <el-table-column prop="name" label="创建员工"> </el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="scope"><el-button type="warninga" plain size="mini" @click="carInfoUser2bc(scope.row)">选择</el-button></template>
          </el-table-column>
        </el-table>
                  <el-pagination
            @size-change="handleSizeChangeCarUser"
            @current-change="handleCurrentChangeCarUser"
            :current-page="carUser.current"
            :page-sizes="[5]"
            :page-size="carUser.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="carUser.total"
          >
    </el-pagination>
        </el-dialog>
        </el-dialog>

        <!-- 添加车辆的弹出框3333333333333333333333333 -->
    <el-dialog title="车辆信息" :visible.sync="dialogFormVisible3" width="1000px">
      <el-steps :active="active" finish-status="success" space align-center>
        <el-step title="选择车位"></el-step>
        <el-step title="选择业主"></el-step>
        <el-step title="添加车辆信息"></el-step>
      </el-steps>
      <hr />
        <el-form>
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input
            v-model="CarUserInfo.carNumber"
            placeholder="必填，请填写车牌号"
            autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="车品牌" :label-width="formLabelWidth">
          <el-input
            v-model="CarUserInfo.carBrand"
            placeholder="必填，请填写车品牌"
            autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="车类型" :label-width="formLabelWidth">
          <el-select
            v-model="CarUserInfo.carType"
            placeholder="必填，请选择车类型"
            style="margin-right: 400px"
            >
            <el-option label="家用小汽车" value="家用小汽车"
              >家用小汽车</el-option
            >
            <el-option label="客车" value="客车"
              >客车</el-option
            >
            <el-option label="货车" value="货车"
              >货车</el-option
            >
            <el-option label="跑车" value="跑车"
              >跑车</el-option
            >
            <el-option label="电动车" value="电动车"
              >电动车</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="车颜色" :label-width="formLabelWidth">
          <el-input
            v-model="CarUserInfo.carColor"
            placeholder="必填，请填写车颜色"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="车牌类型" :label-width="formLabelWidth">
          <el-select
            v-model="CarUserInfo.carNumberType"
            placeholder="必填，请选择车牌类型"
            style="margin-right: 400px"
          >
            <el-option label="月租车" value="月租车"
              >月租车</el-option
            >
            <el-option label="出售车辆" value="出售车辆"
              >出售车辆</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="绑定楼栋房屋" :label-width="formLabelWidth">
          <el-select
            v-model="CarUserInfo.houseId"
            placeholder="必填，请选择楼栋房屋"
            style="margin-right: 400px"
          >
            <el-option
              v-for="house in carHouse"
              :key="house.houseId"
              :value="house.houseId"
              >{{ house.bname}} / {{house.hname}}房</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="CarUserInfo.remarks"
            placeholder="可选，请填写备注信息"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <hr/>
      <el-row :gutter="24">
        <el-col :span="2" :offset="15"><el-button style="margin-top: 12px;" type="danger" @click="quxiao()">取消</el-button></el-col>
        <el-col :span="2" :offset="1"><el-button style="margin-top: 12px;" @click="back2()" >上一步</el-button></el-col>
        <el-col :span="2" :offset="1"><el-button style="margin-top: 12px;" @click="addCarUserInfo()">提交</el-button></el-col>
      </el-row>
        
    </el-dialog>

    <!-- 修改页面的弹出框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form>
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input
            v-model="updateCarInfo.carNumber"
            placeholder="必填，请填写车牌号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="车品牌" :label-width="formLabelWidth">
          <el-input
            v-model="updateCarInfo.carBrand"
            placeholder="必填，请填写车品牌"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="车类型" :label-width="formLabelWidth">
          <el-select
            v-model="updateCarInfo.carType"
            placeholder="必填，请选择车类型"
            style="margin-right: 400px"
          >
            <el-option label="家用小汽车" value="家用小汽车"
              >家用小汽车</el-option
            >
            <el-option label="跑车" value="跑车">跑车</el-option>
            <el-option label="客车" value="客车">客车</el-option>
            <el-option label="货车" value="货车">货车</el-option>
            <el-option label="电动车" value="电动车">电动车</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色" :label-width="formLabelWidth">
          <el-input
            v-model="updateCarInfo.carColor"
            placeholder="必填，请填写车辆颜色"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="updateCarInfo.remarks"
            placeholder="可选，请填写备注信息"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="updateKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: [],
      parkinglots: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisibleupdate: false,
      dialogVisible: false,
      innerVisible:false,
      innerVisible2:false,
      updateCarInfo: {},
      parkingspace2:{},
      carUser:{},
      carUser2:{},
      carHouse:{},
      CarUserInfo:{},
      parkingspace:{},
      selCarNumber: "",
      selParkingSpaceNumber: "",

      selCarparkinglot:"",
      selParkingSpaceNumber2: "",

      tel:"",
      selusername:"",

      selCarType: "",
      disabled: true,
      disable2: true,
      TParkingspace: {},
      formLabelWidth: "120px",
       active: 0,
    };
  },
  methods: {
    //查询所有加分页
    find(page = 1, pageSize = 5) {
      let url =
        "/leanyuan/t-carinfo/selectPage?page=" + page + "&pageSize=" + pageSize;
      this.$axios
        .get(url)
        .then((resp) => {
          console.log("查询所有");
          console.log(resp.data);
          this.pagination = resp.data;
          this.selCarNumber = "";
          this.selParkingSpaceNumber = "";
          this.selCarType = "";
        })
        .catch((ex) => {});
    },
    //每页显示的记录数发生改变，查询
    handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    },

    //带条件查询加分页
    findbyParam(page = 1, pageSize = 5) {
      let url = "/leanyuan/t-carinfo/selectPageByParam";
      let params = new URLSearchParams();
      params.append("carNumber", this.selCarNumber);
      params.append("parkingSpaceNumber", this.selParkingSpaceNumber);
      params.append("carType", this.selCarType);
      params.append("page", page);
      params.append("pageSize", pageSize);
      this.$axios
        .post(url, params)
        .then((resp) => {
          console.log(resp.data);
          this.pagination = resp.data;
        })
        .catch((ex) => {});
    },

    //查询所有空闲车位加分页
    findParkingspace(page = 1, pageSize = 5) {
      this.innerVisible=true;
      let url =
        "/leanyuan/t-carinfo/selectParkingspace?page=" + page + "&pageSize=" + pageSize;
      this.$axios
        .get(url)
        .then((resp) => {
          console.log("查询所有");
          console.log(resp.data);
          this.parkingspace = resp.data;
        })
        .catch((ex) => {});
    },
        //每页显示的记录数发生改变，查询(空闲车位)
    handleSizeChangeparking(pageSize) {
      this.findParkingspace(this.parkingspace.current, pageSize);
    },
    //当前页面发生改变，查询(空闲车位)
    handleCurrentChangeparking(page) {
      this.findParkingspace(page, this.parkingspace.size);
    },

    //根据条件查询空闲车位加分页
    findcarparkingspacebyParam(page = 1, pageSize = 5) {
      let params = new URLSearchParams();
      params.append("selCarparkinglot", this.selCarparkinglot);
      params.append("selParkingSpaceNumber", this.selParkingSpaceNumber2);
      params.append("page", page);
      params.append("pageSize", pageSize);
      let url =
        "/leanyuan/t-carinfo/selectCarUserByParam";
      this.$axios
        .post(url, params)
        .then((resp) => {
          console.log(resp.data);
          this.parkingspace = resp.data;
        })
        .catch((ex) => {});
    },

     //查询所有业主信息加分页
    findCarUser(page = 1, pageSize = 5) {
      this.innerVisible2=true;
      let url =
        "/leanyuan/t-carinfo/selectCarUser?page=" + page + "&pageSize=" + pageSize;
      this.$axios
        .get(url)
        .then((resp) => {
          console.log("查询所有业主");
          console.log(resp.data);
          this.carUser = resp.data;
        })
        .catch((ex) => {});
    },

   //每页显示的记录数发生改变，查询(空闲车位)
    handleSizeChangeCarUser(pageSize) {
      this.findCarUser(this.carUser.current, pageSize);
    },
    //当前页面发生改变，查询(空闲车位)
    handleCurrentChangeCarUser(page) {
      this.findCarUser(page, this.carUser.size);
    },

     //根据条件查询业主信息加分页
    findcarUserbyParam(page = 1, pageSize = 5) {
      let params = new URLSearchParams();
      params.append("tel", this.tel);
      params.append("selusername", this.selusername);
      params.append("page", page);
      params.append("pageSize", pageSize);
      let url =
        "/leanyuan/t-carinfo/selectUserInfoByParam";
      this.$axios
        .post(url, params)
        .then((resp) => {
          console.log(resp.data);
          this.carUser = resp.data;
        })
        .catch((ex) => {});
    },

     //查询指定业主信息（包括楼栋编号和房屋编号）
    findCarUserInfo() {
      let url =
        "/leanyuan/t-carinfo/selectCarUserInfo?id="+this.carUser2.userId;
      this.$axios
        .get(url)
        .then((resp) => {
          console.log("查询所有业主");
          console.log(resp.data);
          this.carHouse = resp.data;
        })
        .catch((ex) => {});
    },

    //添加功能
    addCarUserInfo() {
      let url = "/leanyuan/t-carinfo/addUserCar";
      this.CarUserInfo.parkingspaceId=this.parkingspace2.parkingspaceId;
      this.CarUserInfo.userId=this.carUser2.userId;
      console.log(this.CarUserInfo)
      this.$axios
        .post(url, this.CarUserInfo)
        .then((resp) => {
          console.log(resp);
          if (resp.data) {
            this.dialogFormVisible3 = false;
            this.CarUserInfo = {};
            this.parkingspace2 = {};
            this.carUser2 = {};
            this.active=0;
            this.find();
          } else {
            this.dialogVisible = true;
          }
        })
        .catch((ex) => {});
    },
    //消息对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //推出添加页面时清空添加页面数据
    clearupdateparkinglot() {
      this.TParkingspace = {};
      this.dialogFormVisible = false;
      this.dialogVisible = false;
    },
    //进入修改页面
    updateUI(row) {
      this.dialogFormVisibleupdate = true;
      this.updateCarInfo = row;
      console.log(row);
    },

    //保存修改的数据
    updateKeep() {
      let url = "/leanyuan/t-carinfo/updateCarInfoById";
      this.$axios
        .post(url, this.updateCarInfo)
        .then((resp) => {
          console.log(resp);
          if (resp.data) {
            this.dialogFormVisibleupdate = false;
            this.dialogVisible = false;
            this.TParkingspace = {};
            this.find();
          } else {
            this.dialogVisible = true;
          }
        })
        .catch((ex) => {});
    },

    //删除
    deleteParkinglot(row) {
      console.log(row.carId);
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          //调用服务端的处理，然后再给出成功提示
          let url = "/leanyuan/t-carinfo/deleteCarInfoById?id=" + row.carId;
          this.$axios
            .get(url)
            .then((resp) => {
              console.log(resp.data);
              this.find();
            })
            .catch((ex) => {});
          this.$message({
            type: "success",
            message: row.carId + ",删除成功!",
          });
        })
        .catch(() => {
          this.$alert("已经取消操作", "提示");
        });
    },
    //下一步骤
    next() {
        if (this.active++ > 2) this.active = 0;
        this.dialogFormVisible1=false;
        this.dialogFormVisible2=true;
      },
      //下一步骤2
      next2(){
        console.log("//////////////////////////////////////")
        if (this.active++ > 2) this.active = 0;
        this.dialogFormVisible2=false;
        this.dialogFormVisible3=true;
        this.findCarUserInfo();
      },
      //上一步
      back(){
        this.active--;
        this.dialogFormVisible1=true;
        this.dialogFormVisible2=false;
        
      },
      //上一步2
      back2(){
        this.active--;
        this.dialogFormVisible2=true;
        this.dialogFormVisible3=false;
        
      },
      quxiao(){
        this.dialogFormVisible1=false;
        this.dialogFormVisible2=false;
        this.dialogFormVisible3=false;
        this.parkingspace2={};
        this.carUser2={};
        this.CarUserInfo={};
        this.active=0;
      },
      //获得选中信息1
      parkingspace2bc(row){
        this.parkingspace2=row;
        this.innerVisible=false;
        this.disabled=false;
        this.selCarparkinglot="";
        this.selParkingSpaceNumber2="";
      },
      //获得选中信息2
       carInfoUser2bc(row){
        this.carUser2=row;
        this.innerVisible2=false;
        this.disable2=false;
        this.selusername="";
        this.tel="";
      }
  },
  mounted() {
    this.find();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 24px;
}
.el-container {
  margin-top: -58px;
  height: 100%;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
#div1 {
  height: 150px;
  width: 100px;
  background-color: red;
  margin-left: 210px;
}
</style>